<template>
	<z-paging ref="pagingRef" v-model="dataList" @query="queryList">
		<template #top>
			<!-- 选择政策 -->
			<view class="select-policy-layout">
				<view class="select-policy-box" @tap="showSelectPolicy">
					<text>{{selectPolicy.policyName}}</text>
					<xh-icon icon="icon_shanglajiantou" size="28rpx"></xh-icon>
				</view>
			</view>
		</template>
		<view class="merchant-list">
			<view class="merchant-list-item" v-for="item in dataList" :key="item.merchantId" @tap="showMerchantDetail(item)">
				<image src="/static/operate/agent_photo.png" mode="aspectFit"></image>
				<view class="merchant-list-item-container">
					<text class="merchant-list-item-container-title">{{item.merchantName}}</text>
					<text class="merchant-list-item-container-code">{{item.tel}}</text>
					<text class="merchant-list-item-container-time" v-if="item.lastTransactionTime">最后一次交易 {{item.lastTransactionTime}}</text>
				</view>
				<xh-icon icon="icon_jiantou" style="margin-left: auto;"></xh-icon>
			</view>
		</view>
		<xh-ploicy-pop ref="policyRef" @select="selectResult"></xh-ploicy-pop>
	</z-paging>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { getFilterPolicyList, getMerSilenceDetailList } from '@/common/api/api.js'
	import XhPloicyPop from '@/pages/operate/widget/xh-policy/xh-ploicy-pop.vue'
	
	const props = defineProps(['data'])
	const jsonData = JSON.parse(decodeURIComponent(props.data || '{}'))
	
	const policyRef = ref(null)
	const pagingRef = ref(null)
	const policyList = ref([])
	const dataList = ref([])
	const selectPolicy = ref({
		policyId: 0,
		policyName: '全部'
	})
	// 选择政策
	const showSelectPolicy = () => {
		if (policyList.value.length == 0) {
			return
		}
		policyRef.value.show(policyList.value)
	}
	// 商户详情
	const showMerchantDetail = (item) => {
		const data = encodeURIComponent(JSON.stringify(item))
		uni.navigateTo({
			url: `/pages/home/merchant-manager/merchant-list/merchant-detail/merchant-detail?data=${data}`
		})
	}
	// 筛选结果回调
	const selectResult = (res) => {
		console.log(res)
		selectPolicy.value = res
		dataList.value = []
		pagingRef.value.reload()
	}
	// 获取政策列表数据
	const getFilterPolicyListData = async () => {
		const res = await getFilterPolicyList()
		policyList.value = res.result
		policyList.value.unshift({
			policyId: 0,
			policyName: '全部',
		})
	}
	// 获取列表数据
	const queryList = async (pageNo) => {
		let params = {}
		if(selectPolicy.value.policyId != 0){
			params.policyId = selectPolicy.value.policyId
		}
		params.statementId = jsonData.statementId
		const res = await getMerSilenceDetailList(params, pageNo)
		const list = res.result
		if(pageNo == 1) {
			dataList.value = []
		}
		dataList.value = [...dataList.value,...list]
		pagingRef.value.completeByTotal(list,res.page.totalElements)
	}
	onLoad(() => {
		uni.setNavigationBarTitle({
			title:jsonData.labelName
		})
		getFilterPolicyListData()
	})
</script>

<style lang="scss" scoped>
	.select-policy-layout{
		padding: 30rpx;
		.select-policy-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			height: 88rpx;
			color: $xh-color-3;
			font-size: 28rpx;
			border-radius: 16rpx;
			border: 1px solid $xh-line-color;
			background-color: #fff;
		}
	}
	.merchant-list {
		padding: 0 30rpx;
		.merchant-list-item {
			display: flex;
			align-items: center;
			background-color: #fff;
			padding: 30rpx;
			border-radius: 16rpx;
			margin-bottom: 20rpx;

			image {
				width: 96rpx;
				height: 96rpx;
				flex-shrink: 0;
			}

			.merchant-list-item-container {
				display: flex;
				flex-direction: column;
				margin-left: 20rpx;
				font-size: 24rpx;
				color: $xh-color-6;

				text:nth-child(n + 2) {
					margin-top: 16rpx;
				}

				.merchant-list-item-container-title {
					font-size: 28rpx;
					color: $xh-color-3;
				}

				.merchant-list-item-container-time {
					color: $xh-orange-color;
				}
			}
		}
	}
</style>